<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>柱状图示例</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  
  <style>
  
  .head{
	  
	  width: 80%;
	  height: 500px;
	   margin: 0 auto;
  }
	
	.Pancake{
		width: 50%;
		float: left;
		
	}
	.columnar{
		width: 50%;
		float: left;
		
	}
	
	.layui-container{
		margin: 0 auto;
		 width: 500px;
	}
	
	
	
  </style>
</head>
<body>
	
	<div class="head"> 
		<div class="columnar"> 

			<div class="layui-container">
			  <div class="layui-row">
				<div class="layui-col-md12">
				  <div id="barChart" style="width:600px;height: 400px;"></div>
				</div>
			  </div>
			</div>
		</div>


		<div class="Pancake"> 
			<div class="layui-container">
			  <div class="layui-row">
				<div class="layui-col-md12">
				  <div id="pieChart" style="height: 400px;"></div>
				</div>
			  </div>
			</div>
		</div>


	</div>


	<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script src="layui/layui.js"></script>
<script src="https://cdn.staticfile.org/echarts/5.2.2/echarts.min.js"></script>
<script>
  layui.use('element', function(){
    var element = layui.element;


	  price();
	  types();

  });




  function price() {

	  $.get("../../order", {op: "findprice"}, function (rs) {

		  if (rs != null) {
			  console.log(rs.data);
			   moth(rs.data);



			  var barChart = echarts.init(document.getElementById('barChart'));

			  var option = {

				  title: {
					  text: '月销售额'
				  },
				  tooltip: {},
				  xAxis: {
					  data:  [moths[0],moths[1],moths[2],moths[3],moths[4],moths[5],moths[6],moths[7],moths[8],moths[9],moths[10],moths[11]]
				  },
				  yAxis: {},
				  series: [{
					  name: '销量',
					  type: 'bar',
					  data:  [prices[0],prices[1],prices[2],prices[3],prices[4],prices[5],prices[6],prices[7],prices[8],prices[9],prices[10],prices[11]]
				  }]
			  };

			  barChart.setOption(option);

			  var pieChart = echarts.init(document.getElementById('pieChart'));

			  var option = {
				  title: {
					  text: '商品类型占比',
					  left: 'center'
				  },
				  tooltip: {
					  trigger: 'item',
					  formatter: '{a} <br/>{b} : {c} ({d}%)'
				  },
				  series: [
					  {
						  name: '商品数量',
						  type: 'pie',
						  radius: '55%',
						  center: ['50%', '50%'],
						  data: [
							  {value: 20, name: '手机款式'},
							  {value: 2, name: '电脑整机'},
							  {value: 1, name: '家电类型'},
							  {value: 10, name: '影音娱乐'},
							  {value: 0, name: '摄影摄像'}
						  ],
						  emphasis: {
							  itemStyle: {
								  shadowBlur: 10,
								  shadowOffsetX: 0,
								  shadowColor: 'rgba(0, 0, 0, 0.5)'
							  }
						  }
					  }
				  ]
			  };

			  pieChart.setOption(option);



		  }

	  });


  }

  let moths=['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月'];
  let prices= [0, 0, 0, 0, 0,0, 0, 0, 0, 0,0,0];
  
  function moth(arr) {

	  for (let i = 0; i < arr.length; i++) {
		  var dateStr = arr[i].totalTime;
		  var date = new Date(dateStr);
		  var month = date.getMonth() + 1; // 月份从0开始，因此要加1

		  if(month==1){
			  prices[0]+= arr[i].totalPrice;
		  }
		  if(month==2){
			  prices[1]+= arr[i].totalPrice;
		  }
		  if(month==3){
			  prices[2]+= arr[i].totalPrice;
		  }
		  if(month==4){
			  prices[3]+= arr[i].totalPrice;
		  }
		  if(month==5){
			  prices[4]+= arr[i].totalPrice;
		  }
		  if(month==6){
			  prices[5]+= arr[i].totalPrice;
		  }
		  if(month==7){
			  prices[6]+= arr[i].totalPrice;
		  }
		  if(month==8){
			  prices[7]+= arr[i].totalPrice;
		  }
		  if(month==9){
			  prices[8]+= arr[i].totalPrice;
		  }
		  if(month==10){
			  prices[9]+= arr[i].totalPrice;
		  }
		  if(month==11){
			  prices[10]+= arr[i].totalPrice;
		  }
		  if(month==12){
			  prices[11]+= arr[i].totalPrice;

		  }
	  }
  }



let number=[0,0,0,0,0];
  function types() {

	  $.get("../../prodDetails", {op: "findnumber"}, function (rs) {

		  if (rs != null) {
			  console.log(rs.data);
			  typesa(rs.data);

			  var pieChart = echarts.init(document.getElementById('pieChart'));

			  var option = {
				  title: {
					  text: '商品类型占比',
					  left: 'center'
				  },
				  tooltip: {
					  trigger: 'item',
					  formatter: '{a} <br/>{b} : {c} ({d}%)'
				  },
				  series: [
					  {
						  name: '商品数量',
						  type: 'pie',
						  radius: '55%',
						  center: ['50%', '50%'],
						  data: [
							  {value: number[0], name: '手机款式'},
							  {value: number[1], name: '电脑整机'},
							  {value: number[2], name: '家电类型'},
							  {value: number[3], name: '影音娱乐'},
							  {value: number[4], name: '摄影摄像'}
						  ],
						  emphasis: {
							  itemStyle: {
								  shadowBlur: 10,
								  shadowOffsetX: 0,
								  shadowColor: 'rgba(0, 0, 0, 0.5)'
							  }
						  }
					  }
				  ]
			  };

			  pieChart.setOption(option);



		  }

	  });


  }


  function typesa(arr) {

	  for (let i = 0; i < arr.length; i++) {
		  number[i]=arr[i].productCount;


	  }
  }





</script>
</body>
</html>
